<template>
  <div class="login-wrapper">
    <img src="http://www.dell-lee.com/imgs/vue3/user.png" alt="" class="pic">
    <div class="input-wrapper">
      <input type="text" class="input" placeholder="请输入用户名" maxlength="11">
    </div>
    <div class="input-wrapper">
      <input type="password" class="input" placeholder="请输入密码">
    </div>
    <div class="input-wrapper">
      <input type="password" class="input" placeholder="确认密码">
    </div>
    <div class="register-button">
      <input type="button" class="login" value="注册" @click="handleRegister" />
    </div>
    <div class="link-wrapper">
      <a href="javascript:;" @click="handleLogin" class="login">已有账号去登录</a>
    </div>
    <Toast v-if="toastData.showModal" :message="toastData.toastMessage" />
  </div>
</template>

<script>

import { useRouter } from 'vue-router'
import Toast, { useToastEffect } from '@/components/Toast'
import { reactive } from 'vue'
import * as request from '@/utils/request'

function userRegisterEffect (router, showToast) {
  const data = reactive({
    username: '',
    password: ''
  })
  const handleRegister = async () => {
    const result = await request.post(
      '/api/user/register',
      {
        username: data.username,
        password: data.password
      })
    if (result?.errno === 0) {
      router.push({ name: 'Login' })
    } else {
      showToast()
    }
  }
  return {
    data,
    handleRegister
  }
}

function useLoginEffect (router) {
  return () => {
    router.push({ name: 'Login' })
  }
}

export default {
  name: 'Register',
  components: {
    Toast
  },
  setup () {
    const router = useRouter()
    const {
      toastData,
      showToast
    } = useToastEffect()
    const handleLogin = useLoginEffect(router)
    const {
      data,
      handleRegister
    } = userRegisterEffect(router, showToast)
    return {
      toastData,
      data,
      showToast,
      handleRegister,
      handleLogin
    }
  }
}
</script>

<style lang="scss" scoped>
.login-wrapper {
  width: 100%;

  .pic {
    display: block;
    margin: 1.2rem auto .4rem auto;
    width: .66rem;
    height: .66rem;
  }

  .input-wrapper {
    width: 100%;
    text-align: center;

    .input {
      margin: 0 .4rem .16rem .4rem;
      border: 1px solid rgba(0, 0, 0, 0.10);
      border-radius: 6px;
      height: .48rem;
      width: 2.95rem;
      font-size: .16rem;
      color: rgba(0, 0, 0, 0.50);
      letter-spacing: 0;
      line-height: .24rem;
      text-outline: none;
      outline: none;
      padding-left: .16rem;
      box-sizing: border-box;
    }
  }

  .register-button {
    width: 100%;
    text-align: center;
    margin-top: .32rem;

    .login {
      margin: 0 .4rem .16rem .4rem;
      height: .48rem;
      width: 2.95rem;
      background-color: #0091FF;
      box-shadow: 0 4px 8px 0 rgba(0, 145, 255, 0.32);
      border-radius: 4px;
      border: none;
      font-size: 16px;
      color: #FFFFFF;
      text-align: center;
      line-height: 24px;

      input {
        color: #FFFFFF;
      }
    }
  }

  .link-wrapper {
    width: 100%;
    text-align: center;

    .register {
      font-size: .16rem;
      line-height: .16rem;
      height: 16px;
      color: rgba(0, 0, 0, 0.50);
      letter-spacing: 0;
      padding-right: .12rem;
      border-right: .01rem solid rgba(0, 0, 0, 0.50);;
    }

    .login {
      font-size: .16rem;
      line-height: .16rem;
      color: rgba(0, 0, 0, 0.50);
      letter-spacing: 0;
    }
  }
}
</style>
